<template>
<!--今日销售款-->
  <el-row gutter="10" >
    <el-col :span="8"><div  >
      <el-card class="todaylist"  shadow="always"><p class="todayFont">今日销售款</p>
        <p class="todayNum">1700</p>
      </el-card>
    </div></el-col>
    <el-col :span="8"><div  >
      <el-card class="todaylist" shadow="always"><p class="todayFont">今日销售笔数</p>
        <p class="todayNum">2</p></el-card>
    </div></el-col>
    <el-col :span="8"><div  >
      <el-card class="todaylist" shadow="always"><p class="todayFont">今日采购笔数</p>
        <p class="todayNum">0</p></el-card>
    </div></el-col>

  </el-row>
<!--待办事项-->
  <el-row >
<!--    标题字样式-->
    <el-col :span="24">
      <el-card class="todoListTitle" shadow="always"><span style="position: absolute;margin-top: -24px"><p class="todayFont">待办事项</p></span></el-card>
    </el-col>
<!--    分区-->
    <el-col :span="4"><el-card class ="todolist" shadow="always"><p>待入库</p>
      <p class="todoListNum">1</p>
    </el-card></el-col>
    <el-col :span="5"><el-card class ="todolist" shadow="always"><p>待出库</p>
      <p class="todoListNum">11</p>
    </el-card></el-col>
    <el-col :span="5"><el-card class ="todolist" shadow="always"><p>库存数量</p>
      <p class="todoListNum">0</p>
    </el-card></el-col>
    <el-col :span="5"><el-card class ="todolist" shadow="always"><p>应收欠款</p>
      <p class="todoListNum">34561</p>
    </el-card></el-col>
    <el-col :span="5"><el-card class ="todolist" shadow="always"><p>应付欠款</p>
      <p class="todoListNum">9969</p>
    </el-card></el-col>

  </el-row>
<!--  销售走势+销售前十产品-->
  <el-row>
<!--    销售走势-->
    <el-col :span="12" >
      <div >
          <el-card style="width: auto;height: 500px;position: relative" shadow="always">
            <el-row >
              <!--            销售走势-字-->
              <el-col :span="7">
                <span style="position: absolute;margin-top: -2px"><p class="todayFont">销售走势</p></span>
              </el-col>
              <el-col :span="17" style="margin-top: -20px;">
                <div class="block">
                  <el-date-picker
                      v-model="value2"
                      type="datetimerange"
                      :shortcuts="shortcuts"
                      range-separator="-"
                      :start-placeholder="value1.start"
                      :end-placeholder="value1.end"
                  />
                </div>
              </el-col>
            </el-row>
            <div ref="chart" style=" height: 400px;"></div>
          </el-card>
      </div>
    </el-col>
<!--    销售前十产品-->
    <el-col :span="12" >
      <div >
        <el-card style="width: auto;height: 500px;position: relative" shadow="always">
          <el-row >
            <!--            销售前十产品-字-->
            <el-col :span="7">
              <span style="position: absolute;margin-top: -2px"><p class="todayFont">销售前十产品</p></span>
            </el-col>
            <el-col :span="17" style="margin-top: -20px;">
              <div class="block">
                <el-date-picker
                    v-model="value2"
                    type="datetimerange"
                    :shortcuts="shortcuts"
                    range-separator="-"
                    :start-placeholder="value1.start"
                    :end-placeholder="value1.end"
                />
              </div>
            </el-col>
          </el-row>
          <div ref="chart2" style=" height: 400px;"></div>
        </el-card>
      </div>
    </el-col>
  </el-row>

</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

// 曲线图-销售走势
const chart = ref(null);
onMounted(() => {
  initChart();
  // 柱状图
  initChart2();
});

const initChart = () => {
  const chartInstance = echarts.init(chart.value);
  const option = {
    xAxis: {
      data: ['2024-01-01', '2024-02-01', '2024-03-01', '2024-04-01', '2024-04-29']
    },
    yAxis: {},
    series: [
      {
        data: [0, 0, 0, 0, 2000],
        type: 'line',
        smooth: true
      }
    ]
  };
  chartInstance.setOption(option);
};
// 前十产品柱状图
const chart2 = ref(null);
const initChart2 = () => {
  const chartInstance = echarts.init(chart2.value);
  const data = [23, 24, 18, 25, 27, 28, 25];
  const sortedData = data.slice().sort((a, b) => b - a); // 对数据从大到小排序
  const option = {
    xAxis: {
      data: ['苹果', '橘子', '香蕉', '电视', '空调', '洗衣机', '华为Mate60']
    },
    yAxis: {},
    series: [
      {
        type: 'bar',
        data: sortedData
      }
    ]
  };
  chartInstance.setOption(option);
};
const value2 = ref('');
const value1 = ref({
  end: new Date().toISOString().split('T')[0],
  start: new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
});
console.log(value1.value);


const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '最近一年',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]
</script>

<style scoped>
/*日期*/
.block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.block:last-child {
  border-right: none;
}
.block .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;

}
/*日期结束*/
/*el-row布局样式*/
.el-row {
  margin-bottom: 10px;

}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

/*待办事项*/
.todolist{
  width: auto;height: 140px;text-align: center;
}
.todoListTitle{
  width: auto;height: 43px;position: relative
}
.todoListNum{
  font-weight: bold;
}
/*今日横版*/
.todaylist{
  width: auto;height: 180px;
}
/*全局标题字体样式*/
.todayFont{
  font-weight: bold;
}
/*今日数字样式*/
.todayNum{
  color: #0aa1ed;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  margin-top: 0px;
}
</style>
